<template>
    <div id="bar">
        <router-link to="/"><div><img :src="path=='/'?'../../static/icon/首页-1.svg':'../../static/icon/首页.svg'"><div :class="{'high-lighted':path=='/'}">首页</div></div></router-link>
        <router-link to="/classify"><div><img :src="path=='/classify'?'../../static/icon/fenlei-1.svg':'../../static/icon/fenlei.svg'"><div :class="{'high-lighted':path=='/classify'}">分类</div></div></router-link>
        <router-link :to="userInfo?'/shopping':'/login'"><div><img :src="path=='/shopping'?'../../static/icon/shop-car-1.svg':'../../static/icon/shop-car.svg'"><div :class="{'high-lighted':path=='/shopping'}">购物车</div></div></router-link>
        <router-link :to="userInfo?'/mine':'/login'"><div><img :src="path=='/mine'?'../../static/icon/wode-1.svg':'../../static/icon/wode.svg'"><div :class="{'high-lighted':path=='/mine'}">我的</div></div></router-link>
    </div>
</template>
<script>
export default {
    computed:{
        path:function(){
            return this.$route.path;
        },
        userInfo(){
            if(sessionStorage.userInfo){
                return true;
            }else{
                return false;
            }
        }
    }
}
</script>
<style scoped>
    #bar{
        position: fixed;
        width: 100%;
        height: 12.2vw;
        background-color: white;
        bottom: 0;
        left: 0;
        border-top: #D9D9D9 solid 1px;
        display: flex;
        font-size: 3.36vw;
        justify-content: space-around;
        padding: 0.56vw;
    }
    img{
        width: 5.6vw;
    }
    a{
        text-decoration: none;
        color: #7F7F7F;
    }
    .high-lighted{
        color:#ff3600;
    }
</style>